<template>
  <view class="todos-page">
    

    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <view 
        v-for="(tab, index) in filterTabs" 
        :key="index"
        class="filter-tab" 
        :class="{ active: currentFilter === index }"
        @tap="switchFilter(index)"
      >
        <text class="filter-text" :class="{ active: currentFilter === index }">{{ tab }}</text>
      </view>
    </view>

    <!-- 待办事项列表 -->
    <scroll-view class="todo-list" scroll-y="true">
      <view class="list-content">
        <!-- 待办事项 -->
        <view 
          v-for="(todo, index) in filteredTodos" 
          :key="todo.id"
          class="todo-item" 
          :class="{ completed: todo.completed }"
        >
          <view class="todo-main">
            <view class="todo-checkbox" @tap="toggleTodo(index)">
              <uni-icons 
                :type="todo.completed ? 'circle-filled' : 'circle'" 
                :size="24" 
                :color="todo.completed ? '#10B981' : '#D1D5DB'" 
              />
            </view>
            <view class="todo-content">
              <text class="todo-title" :class="{ completed: todo.completed }">{{ todo.title }}</text>
              <text v-if="todo.dueDate" class="todo-due-date">{{ todo.dueDate }}</text>
            </view>
          </view>
          <view class="todo-star" @tap="toggleStar(index)">
            <uni-icons 
              :type="todo.starred ? 'star-filled' : 'star'" 
              :size="20" 
              :color="todo.starred ? '#F59E0B' : '#D1D5DB'" 
            />
          </view>
        </view>

        <!-- 图片展示 -->
        <view class="todo-image">
          <image 
            src="/static/images/notebook.jpg" 
            mode="aspectFill"
            class="content-image"
          />
        </view>

        <!-- 空状态 -->
        <view v-if="filteredTodos.length === 0" class="empty-state">
          <uni-icons type="list" size="64" color="#D1D5DB" />
          <text class="empty-text">暂无待办事项</text>
          <text class="empty-subtitle">点击右下角按钮创建新的待办</text>
        </view>
      </view>
    </scroll-view>
    <!-- 浮动操作按钮 -->
    <uni-fab
          ref="fab"
          :pattern="pattern"
          :content="content"
          :horizontal="'right'"
          :vertical="'bottom'"
          :direction="'horizontal'"
          @trigger="trigger"
          @fabClick="createTodo"
        ></uni-fab>
    <!-- 浮动添加按钮 -->
    <!-- <view class="fab-container">
      <view class="fab-button" @tap="createTodo">
        <uni-icons type="plus" size="24" color="#FFFFFF" />
      </view> 
    </view>-->
  </view>
</template>

<script>
export default {
  name: 'TodosIndex',
  data() {
    return {
      currentFilter: 0,
      filterTabs: ['今日', '全部', '已完成'],
      todos: [
        {
          id: 1,
          title: '回复周五产品会议邮件',
          completed: false,
          starred: true,
          dueDate: ''
        },
        {
          id: 2,
          title: '购买下午茶的咖啡豆',
          completed: true,
          starred: false,
          dueDate: ''
        },
        {
          id: 3,
          title: '准备明天项目演示PPT',
          completed: false,
          starred: false,
          dueDate: ''
        },
        {
          id: 4,
          title: '预定下周出差的机票和酒店',
          completed: false,
          starred: false,
          dueDate: '截止: 明天 18:00'
        }
      ]
    }
  },
  computed: {
    filteredTodos() {
      switch(this.currentFilter) {
        case 0: // 今日
          return this.todos.filter(todo => !todo.completed)
        case 2: // 已完成
          return this.todos.filter(todo => todo.completed)
        case 1: // 全部
        default:
          return this.todos
      }
    }
  },
  onLoad() {
    // 注册导航栏按钮点击事件
    uni.onNavigationBarButtonTap(this.onNavigationBarButtonTap);
  },
  // 处理导航栏按钮点击事件
  onNavigationBarButtonTap(e) {
    if (e.index === 0) { // 设置按钮
      this.goToSettings();
    }
  },
  methods: {
    switchFilter(index) {
      this.currentFilter = index
    },
    
    toggleTodo(index) {
      const todo = this.filteredTodos[index]
      if (todo) {
        todo.completed = !todo.completed
        uni.showToast({
          title: todo.completed ? '任务已完成!' : '任务已恢复',
          icon: todo.completed ? 'success' : 'none',
          duration: 1500
        })
      }
    },
    
    toggleStar(index) {
      const todo = this.filteredTodos[index]
      if (todo) {
        todo.starred = !todo.starred
        uni.showToast({
          title: todo.starred ? '已加星标' : '已取消星标',
          icon: 'none',
          duration: 1000
        })
      }
    },
    
    createTodo() {
      uni.navigateTo({
        url: '/pages/todos/create',
        animationType: 'none'
      })
    },
    
    handleFilter() {
      uni.showToast({
        title: '筛选功能开发中',
        icon: 'none'
      })
    },
    
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      })
    }
    
    
  }
}
</script>

<style scoped>
.todos-page {
  background-color: #FFFFFF;
  min-height: 100vh;
  position: relative;
}

/* H5平台自定义导航栏 */
/* #ifdef H5 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  z-index: 1000;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px;
}

.navbar-left {
  flex: 1;
}

.page-title {
  font-size: 17px;
  font-weight: 600;
  color: #1F2937;
  text-align: center;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.navbar-icon:hover {
  background-color: #F3F4F6;
  border-radius: 6px;
}
/* #endif */

/* 筛选标签 */
.filter-tabs {
  display: flex;
  padding: 16px;
  gap: 8px;
  background-color: #FFFFFF;

}

.filter-tab {
  flex: 1;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #F3F4F6;
  text-align: center;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background-color: #10B981;
}

.filter-text {
  font-size: 14px;
  color: #6B7280;
  font-weight: 500;
}

.filter-text.active {
  color: #FFFFFF;
}

/* 待办事项列表 */
.todo-list {
  background-color: rgb(243, 244, 246);
  flex: 1;
  /* #ifdef H5 */
  height: calc(100vh - 120px);
  /* #endif */
  /* #ifndef H5 */
  height: calc(100vh - 76px);
  /* #endif */
}

.list-content {
  padding: 0 16px 100px 16px;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  margin: 16px 0px;
  
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.todo-item.completed {
  opacity: 0.6;
}

.todo-main {
  display: flex;
  align-items: flex-start;
  flex: 1;
  gap: 12px;
}

.todo-checkbox {
  margin-top: 2px;
}

.todo-content {
  flex: 1;
  min-width: 0;
}

.todo-title {
  font-size: 16px;
  font-weight: 500;
  color: #1F2937;
  line-height: 1.4;
  word-break: break-word;
}

.todo-title.completed {
  text-decoration: line-through;
  color: #9CA3AF;
}

.todo-due-date {
  display: block;
  font-size: 12px;
  color: #EF4444;
  margin-top: 4px;
  font-weight: 500;
}

.todo-star {
  margin-top: 2px;
}

/* 图片展示 */
.todo-image {
  margin: 16px 0;
  border-radius: 12px;
  overflow: hidden;
}

.content-image {
  width: 100%;
  height: 128px;
  border-radius: 12px;
  opacity: 0.75;
}

/* 浮动添加按钮 */
.fab-container {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 100;
}

.fab-button {
  width: 56px;
  height: 56px;
  background-color: #6366F1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  transition: all 0.3s ease;
}

.fab-button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  text-align: center;
}

.empty-text {
  font-size: 18px;
  font-weight: 500;
  color: #6B7280;
  margin: 16px 0 8px 0;
}

.empty-subtitle {
  font-size: 14px;
  color: #9CA3AF;
  line-height: 1.5;
}

</style>